<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0px;
        }
        div{/*number=1*/
            width:100px;
            height:100px;
            background-color:violet;
            margin:10px;
        }
        p{
            width:30px;
            height:30px;
            background-color:yellow;
            margin:10px;
        }
        /* p:first-child{
            background-color:blue;
        } */
        /* p:last-child{
            background-color:blue;
        } */
        /* p:nth-child(2){
            background-color:blue;
        } */
        /* p:nth-child(odd){
            background-color:blue;
        } */
        /* p:nth-child(even){
            background-color:blue;
        } */
        /* #one{
            background-color: yellow;
        } */
        /* .one{
            background-color: turquoise;
        } */
        /* *{
            margin:0px;
            padding:0px;  取消固定边距
            background-color:teal;
        } */
        /* #outer li{
            border:1px solid red
        } */
        /* #one+div{
            background-color: tomato;
        } */
        /* #one~div{
            background-color: tomato;
        } */
        /* [id]{
            background-color:blue;
        } */
        /* [class="one"]{
            background-color:purple;
        } */
        /* [class~="one"]{
            background-color:rgb(22, 238, 191);
        } */
        /* [class^="t"]{
            background-color:rgb(139, 109, 247);
        } */
        /* [class$="o"]{
            background-color:rgb(12, 188, 211);
        } */
        /* [class*="o"]{
            background-color:rgb(236, 240, 32);
        } */
        /* #one,.four,ul{
            background-color:pink;
        } */
        /* div#one,div.two,ul{
            background-color:teal;
        } */
        /* a:link{
            color:thistle;
        } */
        /* a:hover{
            color:green;
            cursor:help;
        } */
        /* a:active{
            color:orange;
        } */
        /* a:visited{
            color:yellow;
        } */
        /* #text{
            color:yellow;
        } */
        div#text::first-letter{
            color:rgb(243, 108, 19);
        }
        /* div#text::first-line{
            color:teal;
        }
        input::selection{
            color:red;
        }
        div#text::before{
            content:"你好！"
        }
        div#text::after{
            content:"你好！"
        }
        div#text::after{
            content:url(./11.jpg)
        }
        #one{number=100
            background-color:blue;
        }*/
        .one{/*number10*/
            background-color:pink;
        }
        div#one{/*number101*/
            background-color:purple;
        }
        div[id]{/*number1+10*/
            background-color:thistle
        } 
    </style>
</head>
<body>
    <a href="#one">百度一下</a>
    <input type="text" value="hello">
    <!-- <div id="text">hello<br>
        word
    </div> -->
    <div id="text">11.1  32.1
    </div>

    <div id="one" class="two"></div>
    <div class="one two"></div>
    <div class="two three"></div>
    <div id="four" class="one"></div>
    <div class="one three"></div>
    <ul id="outer">/---ul>li*3>li---ul中嵌套三个li,每一个li中嵌套一个li，回车可以直接生成/
        <li>outer1
            <ul>
                <li>inner</li>
            </ul>
        </li>
        <li>
           outer2
        </li>
        <li>
            outer3
        </li>
    </ul>
     <div>
         <p></p>
     </div>
     <div>
         <p></p>
         <p></p>
     </div>
     <div>
         <p></p>
         <p></p>
         <p></p>
     </div>
     <div>
         <p></p>
         <p></p>
     </div>
</body>
</html>